<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="js/template-native.js"></script>
<!--
    创建模板，设计模板类型
-->
<script type="text/template" id="template">
    <ul>
        <li><%=name%></li>
        <li><%=skill%></li>
        <ul>
            <%for(var i=0;i<happy.length;i++){%>
                <li><%=happy[i]%></li>
            <%}%>
        </ul>
        <ul>
            <%for(var i=0;i<person.length;i++){%>
                <li><%=person[i].name%></li>
                <li><%=person[i].age%></li>
                <li><%=person[i].happy%></li>
            <%}%>
        </ul>
    </ul>
</script>

<script type="text/javascript">
    var obj_json = {
        name:'lwh',
        skill:'催牛逼',
        happy:['催','牛','逼'],
        person:[
            {
                name:'lwh',
                age:24,
                happy:'go'
            },
            {
                name:'xwl',
                age:23,
                happy:'eat'
            },
            {
                name:'hz',
                age:26,
                happy:'weisuo'
            }
        ]
    }

    //调用模板，同时填充数据
    var temp = template('template',obj_json);
    //将模板填充后的数据放在界面进行展示
    $('body').append(temp);

</script>